<script setup>
</script>
<template>
  <div class="box">
    <slot></slot>
    <div class="bg">
      <slot name="background"></slot>
    </div>
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="mid">
      <slot name="mid"></slot>
    </div>
    <!-- <span class="tip">点击任意位置进入系统</span> -->
  </div>
</template>


<style lang="scss" scoped>
.box{
  height: 100%;
  width: 50%;
  // cursor: pointer;
  //亮度变暗
  .bg{
    transition: filter 0.5s,opacity 0.5s;
    filter: brightness(0.5);
  }
  transition: all 0.5s;
  position: relative;
  &:hover{
    width: 70%;
    filter: brightness(1);
    .bg{
      filter: brightness(0.65);
      opacity: 0.9;
    }
    .title{
      opacity: 1;
    }
    .tip{
      opacity: 1;
    }
    .mid{
      opacity: 1;
    }
  }
}
.title{
  transition: opacity 0.5s;
  opacity: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 2rem;
  color: #fff;
  text-align: center;
  width: 100%;
}
.bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tip{
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  color: #c4c3c3;
  font-size: 1.5rem;
  opacity: 0;
  transition: all 0.5s;
}
.mid{
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: all 0.5s;
}
</style>